<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import ProfileInput from "./ProfileInput.vue";
import Tip from "../Common/Tip.vue";
import { ref } from "vue";
import { message } from "ant-design-vue";
import type { UploadChangeParam } from "ant-design-vue";
import _ from "lodash";

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === "done") {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};

const fileList = ref([]);
const headers = {
  authorization: "authorization-text",
};

const status = ref(false);

const userInfo = {
  name: "1",
  web: "2",
  contact: "3",
  phone: "193xxx2387",
  mail: "4",
  qq: "",
  majority: "5",
  business: "6",
};

const uploadInfo = _.debounce(() => {
  console.log(userInfo);
}, 100);

const changeInfo = (key: keyof typeof userInfo, val: string) => {
  //   console.log(key, val);
  uploadInfo();

  userInfo[key] = val;
};
</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="基本信息"></ProductBox>
    <Tip>请完善以下信息，方便我们更好的为您服务。</Tip>
    <p class="text-base pt-10 mb-3 font-bold text-gray-400">头像设置</p>
    <div class="flex pl-20">
      <a-upload v-model:file-list="fileList" name="file" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :headers="headers" @change="handleChange">
        <img src="/console/user0.png" alt="" class="rounded h-25 w-25" />
      </a-upload>
    </div>

    <p class="text-base pt-10 mb-3 font-bold text-gray-400">基本信息</p>
    <ProfileInput name="认证名称" :value="userInfo.name" :status="status" @changeVal="changeInfo" obj-name="name" />
    <ProfileInput name="公司网站" :value="userInfo.web" :status="status" @changeVal="changeInfo" obj-name="web" />
    <p class="text-base pt-10 mb-3 font-bold text-gray-400">账户联系人</p>
    <ProfileInput name="姓名" :value="userInfo.contact" :status="status" @changeVal="changeInfo" obj-name="contact" />
    <ProfileInput name="手机" :value="userInfo.phone" :status="status" @changeVal="changeInfo" obj-name="phone" />
    <ProfileInput name="邮箱" :value="userInfo.mail" :status="status" @changeVal="changeInfo" obj-name="mail" />
    <ProfileInput name="QQ" :value="userInfo.qq" :status="status" @changeVal="changeInfo" obj-name="qq" />
    <p class="text-base pt-10 mb-3 font-bold text-gray-400">业务信息</p>
    <ProfileInput name="主要行业应用" :value="userInfo.majority" :status="status" @changeVal="changeInfo"
      obj-name="majority" />
    <ProfileInput name="主营业务" :value="userInfo.business" :status="status" @changeVal="changeInfo" obj-name="business" />
    <div class="flex pl-20 pt-7 pb-10">
      <a-button type="primary" @click="status = !status">
        {{ status ? "提交" : "修改" }}
      </a-button>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
